<template>
    <!-- 使用 ma-crud 组件 -->
    <ma-form v-model="form" :columns="columnsOptions" ref="crudForm" @submit="handlerSubmit" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import financialAccountsReceivable from '@/api/financial/financialAccountsReceivable'
import { Message } from '@arco-design/web-vue'

const emits = defineEmits(['succ'])
const handlerSubmit = (data, done) => {
    if (form.value) {
        if(!form.value.user_id){
            Message.error('请输入付款方！')
            return 
        }
        if(!form.value.settlement_method){
            Message.error('请输入结算方式！')
            return 
        }
        if(!form.value.payment_method){
            Message.error('请输入支付方式！')
            return 
        }
        if(!form.value.price){
            Message.error('请输入金额！')
            return 
        }
        financialAccountsReceivable.save(form.value).then( res => {
            if (res.code == 200 && res.success) {
                Message.success('提交成功')
                emits('succ')
            }
        }).catch( e => {
            console.error(e)
            Message.error('提交失败')
        })
    }
}
// form 组件的 ref
const crudForm = ref()
// 表单数据
const form = ref({})
// 组件的字段设置
const columnsOptions = reactive([
{
    title: "付款方",
    dataIndex: "user_id",
    align: "center",
    formType: "select",
    search: true,
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: "system/dept/remote",
      // 指定组件接收的props
      props: { label: "name", value: "id" },
      // 开启分页
      openPage: false,
      // 远程请求配置项
      remoteOption: {
        // 按用户名排序
        sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
        // 设置查询的字段
        select: ["id", "name"],
        // 设置数据过滤
        filter: {
          type: ["=", 2],
          status: ['=',1]
        },
        // 关联模型
        relations: [],
      },
    },
    cascaderItem: ["contract_id"],
  },
    {
        title: '结算方式',
        dataIndex: 'settlement_method',
        formType: 'radio',  // 使用单选框组件
        // 定义字典数据
        dict: {
            data: [{ label: '预付结算', value: 1 }, { label: '周期结算', value: 2 }, { label: '现结', value: 3 }]
        }
    },
    {
        title: '支付方式',
        dataIndex: 'payment_method',
        formType: 'radio',  // 使用单选框组件
        // 定义字典数据
        dict: {
            data: [{ label: '惠支付', value: 1 }, { label: '现金', value: 2 }, { label: '对公转账', value: 3 }]
        }
    },
    {
        title: "金额",
        dataIndex: "price",
        formType: "input",
        align:'center',
    },
    {
        title: "备注",
        dataIndex: "notes",
        formType: "textarea",
        align:'center',
    },
])
</script>